<%--
  Created by IntelliJ IDEA.
  User: c
  Date: 2017-12-03
  Time: 22:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!--jstl标签-->
<c:set value="${pageContext.request.contextPath}" var="ctx"></c:set>
<html>
<head>
    <title>Title</title>

    <script type="text/javascript" src="${ctx}/js/jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="${ctx}/js/highcharts.js" ></script>
</head>

<body>

<div style="width:90%;margin:40px auto 0 auto;">

    <div id="chart_combo" class="chart_combo"></div>

</div>

<script type="text/javascript">
    var ctx='${ctx}';

    $.ajax({
        async: false,
        type : "POST",
        url : ctx+"/Statis/drugStatis",
        dataType : 'json',
        success : function(series) {
            console.log(series)
            var chart;
            $(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'chart_combo' //关联页面元素div#id
                    },

                    title: {  //图表标题
                        text: '药品进销数量统计图'
                    },

                    xAxis: { //x轴
                        categories: ['呼吸系统用药', '血液系统用药','注射剂类药品', '激素类药品','皮肤科用药','妇科用药','清热解毒药品','滋补类药品','维生素、矿物质药品','消化系统用药'],  //X轴类别
                        labels:{y:18}  //x轴标签位置：距X轴下方18像素
                    },
                    yAxis: {  //y轴
                        title: {text: '总数量'}, //y轴标题
                        lineWidth: 2 //基线宽度
                    },
                    tooltip: {
                        formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框
                            var s;
                            if (this.point.name) { // 饼状图
                                s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '(' + twoDecimal(this.percentage) + '%)';
                            } else {
                                s = '' + this.x + ': ' + this.y + '';
                            }
                            return s;
                        }
                    },
                    labels: { //图表标签
                        items: [{
                            html: '各类药品现有库存',
                            style: {
                                left: '48px',
                                top: '8px'
                            }
                        }]
                    },
                    exporting: {
                        enabled: false  //设置导出按钮不可用
                    },
                    credits: {
                        text: '药品进销数量统计',
                        href: 'javaScript:void(0)'
                    },
                    series:series
                });
            });
            //保留2位小数
            function twoDecimal(x) {
                var f_x = parseFloat(x);
                if (isNaN(f_x)) {
                    alert('错误的参数');
                    return false;
                }
                var f_x = Math.round(x * 100) / 100;
                var s_x = f_x.toString();
                var pos_decimal = s_x.indexOf('.');
                if (pos_decimal < 0) {
                    pos_decimal = s_x.length;
                    s_x += '.';
                }
                while (s_x.length <= pos_decimal + 2) {
                    s_x += '0';
                }
                return s_x;
            }
        }
    });
   /* [{ //数据列
        type: 'column',
        name: '采购',
        data: [8.4, 9.8, 11.4, 15.6,8.4, 9.8, 11.4, 36.6,6.5,6.3]
    },
        {
            type: 'column',
            name: '入库',
            data: [9.2, 7.8, 10.2, 16.8,8.4, 9.8, 11.4, 15.6,6.5,6.3]
        },
        {
            type: 'column',
            name: '出库',
            data: [6.5, 9.4, 13.2, 18.6,8.4, 9.8, 11.4, 15.6,6.5,6.3]
        },
        {
            type: 'spline',
            name: '现有库存',
            data: [8.03, 9, 11.6, 17,8.4, 9.8, 11.4, 15.6,6.5,6.3]
        },
        {
            type: 'pie', //饼状图
            name: '水果消费总量',
            data: [{
                name: '采购',
                y: 45.2,
                color: '#4572A7'
            },
                {
                    name: '入库',
                    y: 44,
                    color: '#AA4643'
                },
                {
                    name: '出库',
                    y: 47.7,
                    color: '#89A54E'
                },
                {
                    name: '出库1',
                    y: 47.7,
                    color: '#89A54E'
                },{
                    name: '出库2',
                    y: 47.7,
                    color: '#89A54E'
                }],
            center: [890, 70],  //饼状图坐标
            size: 140,  //饼状图直径大小
            dataLabels: {
                enabled: false  //不显示饼状图数据标签
            }
        }]*/
</script>

</body>
</html>
